- 综合排序
- 最热优先
- 最新优先
- 来自专栏Next.js 实战系列
动态配色方案：在 Next.js 中实现 Shadcn UI 主题色切换
在这里，我强烈推荐一款专为shadcn/ui打造的主题编辑与生成工具：https://tweakcn.com/TweakCN不仅界面简洁直观，更深度集成了shadcn/ui的设计规范，支持实时预览、一键导出 对于希望快速定制品牌化UI风格的开发者来说，TweakCN无疑是一个强大而贴心的助手。定义多套配色方案1、在主题编辑页面，TweakCN默认提供了43套精心设计的配色方案。 你可以逐一浏览并实时预览每种方案在实际UI组件中的呈现效果。从中挑选几套符合项目风格或个人审美的配色，也可以基于现有方案进一步微调主色、辅助色或语义色，打造完全属于你自己的定制化主题。 ,system-ui,-apple-system,BlinkMacSystemFont,'SegoeUI',Roboto,'HelveticaNeue',Arial,'NotoSans',sans-serif ,'AppleColorEmoji','SegoeUIEmoji','SegoeUISymbol','NotoColorEmoji';--font-serif:ui-serif,Georgia,Cambria
55700编辑于 2025-12-29 - 来自专栏沉浸式趣谈
基于 Shadcn-ui 的 AI 应用组件库 AI Elements
这是什么 AI Elements 基于 shadcn/ui 构建，提供了一套开箱即用的 AI 应用组件。对话框、消息气泡、代码块、推理过程展示这些常见的 AI 界面元素，都有现成的实现。 安装很简单 前提是你的项目已经装了 Next.js、AI SDK 和 shadcn/ui。、 Node.js 版本要 18 以上。 CLI： npx shadcn@latest add https://elements.ai-sdk.dev/api/registry/all.json Skill 模块 如果你在用 Claude 检查 Tailwind 4 配置，确保 globals.css 正确导入了 shadcn/ui 的基础样式。 CLI 运行后没反应？ 基于 Shadcn-ui 的 AI 应用组件库 AI Elements
35510编辑于 2026-02-28 CodeBuddy集成ShadCN UI MCP Server：组件化前端项目的AI开发提速指南
UI MCP”，复制保存（仅显示一次）。 二、核心配置步骤核心操作：修改CodeBuddy的Craft_mcp_settings.json配置文件，追加ShadCN UI MCP配置。 /shadcn-ui-mcp-server", // 多框架兼容版 "--github-api-key", "ghp_xxx" // 替换为你的GitHub Token ], 三、配置验证回到右侧栏对话框页面，点击齿轮按钮进入设置，看到正常状态：“ShadCN UI MCP Server”右侧按钮显示已启用，则说明成功配置。 五、参考资源CodeBuddy MCP配置官方指南：腾讯云开发文档；ShadCN UI MCP Server（多框架版）：GitHub仓库；GitHub Token创建官方指南：GitHub Docs；
29110编辑于 2026-02-04UI 代码不写也行？我用 MCP Server 和 ShadCN 自动生成前端界面
它根本不懂你用的组件库（比如 ShadCN UI）结构和用法，只是简单“堆积代码片段”，没法理解组件间的组合逻辑。MCP Server 是什么？ 搭建 ShadCN UI MCP ServerMCP Server 的源码在 GitHub 上开源，点这里。 安装很简单：npx @jpisnice/shadcn-ui-mcp-server建议绑定 GitHub 个人访问令牌，提升请求配额：npx @jpisnice/shadcn-ui-mcp-server 示例内容：@rule.mdc我想用 ShadCN UI 组件构建一个现代网站，先做登录页，包含邮箱、密码输入框和登录按钮。 参考链接ShadCN UI MCP Server GitHubShadCN UI 官网TweakCN 主题编辑器ServBay 官网
1.2K00编辑于 2025-08-01- 来自专栏喵喵侠的社区活动征文
Vite + Tailwind + shadcn-ui：2026 年最舒服的中后台前端开发组合
快速初始化我们直接从实战开始，搭建一个基于 React 的基础环境（shadcn/ui 的原生生态在 React 最为成熟）。1. 初始化 shadcn/ui这是最关键的一步。 组件引入与主题定制不同于 Antd 需要配置 Less 变量，shadcn/ui 的核心是 CSS Variables。 shadcn/ui：组件代码就在 src/components/ui 里。如果设计师要求 Select 组件的下拉箭头换个图标，我直接进去修改 select.tsx 源码。 总结Vite + Tailwind + shadcn/ui 的组合，本质上是将开发的控制权从组件库作者手中拿回到了开发者自己手中。
44910编辑于 2026-01-23 - 来自专栏开源小分队
前端开发有福了，这个 78K+ star UI 库项目超精美大气！
项目简介 shadcn-ui 是一个基于现代前端技术栈的开源 UI 组件库，主要依托 Tailwind CSS 构建，还融合了 Radix UI。 跨平台支持:无论是 React、Vue 还是其他主流框架，shadcn-ui 都能无缝集成。 - UI 在项目目录里，通过 npm 安装 shadcn - ui 及其相关依赖： npm install @shadcn/ui 3、配置 Tailwind CSS 因为 shadcn-ui 是基于 {js,jsx,ts,tsx}", // 添加shadcn - ui组件的路径 "./node_modules/@shadcn/ui/dist/**/*. Github地址：https://github.com/shadcn-ui/ui
80210编辑于 2025-02-12 - 来自专栏前端实验室
23年最火的前端组件库项目，竟然是它！
Shadcn UI Shadcn UI - 是一个无头 UI 库。它有组件 API，但没有样式。 /ui 与一般的组件库最大的不同在于，所有的元件都可以直接在文件中进行，shadcn/ui 并非一个可下载的 NPM 包。 /UI 官网上有一个主题编辑器，点击 Customize 按钮可以实时切换风格和主题颜色，设计完成后，我们只需要拷贝 css 主要变量到我们的程序中即可 丰富的组件 Shadcn UI 拥有丰富的组件， /src/*"] } 执行 shadcn-ui CLI 指令来初始化 Shadcn ui npx shadcn-ui@latest init 安装button 组件,会将 button 组件文件添加到你的 components/ui 文件夹中： npx shadcn-ui@latest add button 然后可以在页面中 import 刚刚新增的 Button 组件 import { Button
3.1K10编辑于 2024-01-10 - 来自专栏React知识体系
这个组件库不似Antd、Element，设计理念太新颖了！
简要介绍 Shadcn UI 与其他 UI 和组件库如 Material UI、Ant Design、Element UI 的设计理念截然不同。 按照 Shadcn UI 的说法，Shadcn UI 实际上并不是一个组件库，而是可以复制并粘贴到应用中的可重用组件的集合。 使用方式 设置项目npx shadcn-ui@latest init // or npx shadcn-ui@latest init // or pnpm dlx shadcn-ui@latest initnpx shadcn-ui@latest add button // or npx shadcn-ui@latest add button // or pnpm dlx shadcn-ui@latest add 为什么选择 Shadcn UI？ Shadcn UI 作为一个现代化的 UI 组件库，具有极高的灵活性、可定制性和轻量化特性。
1.3K10编辑于 2024-10-22 如何在React.js中使用Shadcn/UI
什么是Shadcn/UI？在开始设置之前，让我们先明确Shadcn/UI是什么，为什么它是你React.js项目的理想选择。Shadcn/UI是为React.js构建的一个可定制的组件库。 在React.js项目中集成Shadcn/UI现在你了解了Shadcn/UI，让我们一起走过如何将它集成到React.js项目中的过程。 否则，使用以下命令创建一个新的项目：npx create-react-app my-shadcn-ui-appcd my-shadcn-ui-appnpm start这将创建一个名为my-shadcn-ui-app 第三步：导入并使用Shadcn/UI组件让我们将一些Shadcn/UI组件添加到你的React.js应用中。 第四步：定制Shadcn/UI主题Shadcn/UI最棒的特点之一是它的可定制性。你可以调整组件，使其与应用的设计语言保持一致。
3.5K10编辑于 2025-02-28- 来自专栏Web技术学苑
一起学习Vue.js 3高级编程UI组件库实战
shadcn UI是一个新诞生的项目，也是2023年前端领域最火的项目之一。 01 Shadcn UI 的特色 完整的无障碍体验：Shadcn UI 建立于 Radix UI 上，而 Radix UI 所标榜的最大特色之一就是它的 Accessibility——所有元件都遵守 WAI-ARIA 02 Shadcn UI使用 Tailwind CSS 封裝 Radix UI Tailwind CSS 无疑是近年来最常被提及的、实现了 atomic css 的 CSS 框架，而 Shadcn UI 参考来源：https://zhuanlan.zhihu.com/p/694048244 03 Shadcn UI也存在一些新的挑战和问题 由于Shadcn UI将全部UI样式交给了开发者，这种做法带来了新的挑战 需求无法满足：Radix UI 毕竟是小众的元件库，其star数只有 3.4K 而已，不足 Shadcn UI 的十分之一。
65010编辑于 2025-02-12 - 来自专栏IT运维技术圈
一个非常漂亮的后台管理仪表盘UI面板
介绍 shadcn-admin 是一个基于 Shadcn UI 和 Vite 构建的开源管理仪表板用户界面（Admin Dashboard UI）。 自定义组件：除了直接引用 Shadcn UI 示例外，还包含作者原创的额外组件。 技术栈 UI 框架：Shadcn UI（基于 Tailwind CSS 和 Radix UI） 构建工具：Vite（快速、高效的前端构建工具） 路由管理：TanStack Router 类型检查：TypeScript 使用方法 克隆项目： git clone https://github.com/satnaing/shadcn-admin.git 安装依赖并运行： cd shadcn-admin npm install 地址 GitHub 仓库：https://github.com/satnaing/shadcn-admin 在线预览：https://shadcn-admin.netlify.app/
1.5K00编辑于 2025-03-18 - 来自专栏魔术师卡颂
Vercel推出的前端AI工具v0，会改变前端么？
UI与样式分离 v0生成的React组件代码中，样式与UI分别基于两个库： 样式：基于TailwindCSS UI：基于shadcn[2] 样式部分 为什么生成代码的样式部分要使用TailwindCSS UI部分 v0的UI部分非常有意思，他基于shadcn这个“组件”库。 为什么要给「组件」打引号，因为shadcn与一般的组件库完全不同。 这就是shadcn的理念 —— 0依赖，按需复制粘贴代码。 简单来说，如果你想使用shadcn中的某个组件，不是通过npm安装shadcn这个包，再引入组件。 生成的原型代码中，UI与样式分离，其中： UI：基于shadcn 样式：基于TailwindCSS UI部分之所以基于shadcn，显然是为了开发者导出代码后，可以方便的二次开发。 参考资料 [1] v0: https://v0.dev/ [2] shadcn: https://ui.shadcn.com/
2.7K10编辑于 2023-09-21 大气炫酷UI开源项目，超级火！
嗨，大家好，我是小华同学，关注我们获得“最新、最全、最优质”开源项目和高效工作学习方法 shadcn/ui 是一款基于 Radix UI 和 Tailwind CSS 构建的现代化 UI 组件库，专为追求设计品质与开发效率的开发者打造 核心功能亮点 主题定制魔术手内置主题生成器支持实时预览效果，通过可视化界面调整：npx shadcn-ui@latest init三步完成企业级主题配置，支持亮/暗模式无缝切换。️ 同类项目对比功能项shadcn/uiAnt DesignChakra UI定制深度源码级修改配置式调整主题变量调整设计系统支持Figma 原生对接Sketch 适配无包体积按需引入 15KB全量 500KB /ui 三天就搞定了，而且客户对设计还原度非常满意！」 ：无样式基础组件库，适合深度定制项目地址https://github.com/shadcn-ui/ui
71500编辑于 2025-03-15- 来自专栏前端框架
尤雨溪连发两条推特墙裂推荐的这些库你一定要知道!
Reka UI 的设计理念与 Radix UI 非常相似，适合那些希望在 Vue 中构建高度定制化 UI 的开发者。 官网: reka-ui.com Shadcn 的 Vue 替代品：Shadcn-vue Shadcn 是 React 生态中的一个 UI 组件库，以其现代化的设计和丰富的组件著称。 在 Vue 生态中，Shadcn-vue 提供了类似的组件库，帮助开发者快速构建美观且功能丰富的用户界面。Shadcn-vue 的组件设计风格现代，支持主题定制，非常适合需要快速搭建前端界面的项目。 官网: shadcn-vue.com React Three Fiber 的 Vue 替代品：TresJS React Three Fiber 是 React 生态中用于构建 3D 场景的库，基于 Three.js 官网: tresjs.org Aceternity UI / Magic UI 的 Vue 替代品：Inspira UI Aceternity UI 和 Magic UI 是 React 生态中用于构建炫酷
1.6K22编辑于 2025-03-24 - 来自专栏开源服务指南
摆脱繁杂工作：Appwrite 带你高效开发 | 开源日报 No.50
简化了从头开始构建现代化后端 API 所需的复杂性 提供用户身份验证和多种登录方法集成 支持数据库管理以及存储文件管理功能 可进行图像处理操作 支持云函数等其他服务 shadcn-ui/ui[6] Stars : 27.1k License: MIT shadcn/ui 是一个使用 Radix UI 和 Tailwind CSS 构建的精美设计组件库。 以下是 shadcn/ui 的核心优势和关键特性： 易于访问：所有组件都经过良好设计，以确保无障碍性，并为残疾人士提供友好体验。 组件文档详尽：通过查看完善而清晰明了的文档 (http://ui.shadcn.com/docs)，您将轻松掌握如何正确地使用这些功能强大又漂亮实用的 UI 部分。 /ui: https://github.com/shadcn-ui/ui
1.3K10编辑于 2023-10-08 - 来自专栏开源服务指南
开源 UI 组件库和开发工具库概览 | 开源专题 No.59
ant-design/ant-design[1] Stars: 87.9k License: MIT Ant Design 是一个企业级 UI 设计语言和 React UI 库。 shadcn-ui/ui[5] Stars: 27.1k License: MIT shadcn/ui 是一个使用 Radix UI 和 Tailwind CSS 构建的精美设计组件库。 以下是 shadcn/ui 的核心优势和关键特性： 易于访问：所有组件都经过良好设计，以确保无障碍性，并为残疾人士提供友好体验。 vuetify: https://github.com/vuetifyjs/vuetify [4] penpot/penpot: https://github.com/penpot/penpot [5] shadcn-ui /ui: https://github.com/shadcn-ui/ui [6] tonsky/FiraCode: https://github.com/tonsky/FiraCode
78310编辑于 2024-01-04 7.6K Star 这款基于Shadcn的UI框架，颜值与实力并存，前端开发者的新宠！
7.6K Star 这款基于Shadcn的UI框架，颜值与实力并存，前端开发者的新宠！ "基于 Shadcn UI 和 Vite 打造的现代化管理后台，开箱即用的响应式设计 + 无障碍访问，让后台开发从未如此优雅！" '☀️' : ''} </Button>}（完美适配系统级主题同步）️ 技术架构解析技术领域选用方案核心优势UI框架Shadcn UI + Radix无样件组件 + 完美无障碍构建工具Vite 4闪电般的 克隆仓库git clone https://github.com/satnaing/shadcn-admin.git# 2. 安装依赖（推荐pnpm）pnpm install# 3. 完整的E2E测试方案持续更新：作者长期维护issue响应迅速 同类型优质项目推荐Ant Design Pro（23.6k stars） 阿里系企业级解决方案集成umi框架+微前端架构Material-UI
1.2K00编辑于 2025-05-06- 来自专栏程序员老鱼呀
使用 Radix UI 和 Tailwind CSS 构建的精美组件
使用 Radix UI 和 Tailwind CSS 构建的设计精美的组件，支持 Toast、Toggle、Toggle Group、Toolbar、 Navigation Menu。 项目地址：https://github.com/shadcn/ui 这不是一个组件库。它是可重复使用的组件的集合，您可以将其复制并粘贴到您的应用中。 不是组件库是什么意思？ /src"), }, },}) 复制 运行 CLI 运行 init 命令以设置项目：shadcn-ui npx shadcn-ui@latest init 复制 配置 components.json npx shadcn-ui@latest add button 复制 上面的命令会将组件添加到您的项目中。 然后，您可以像这样导入它：Button import { Button } from "@/components/ui/button" export default function Home() {
3.6K21编辑于 2023-11-01 - 来自专栏掘金安东尼
2024 年值得关注的 JavaScript 最前沿趋势，走起！
接下来，让我们逐一介绍重点： 最流行的前端项目 shadcn/ui shadcn/ui：改变 UI 设计。 shadcn/ui 是 2023 年 JavaScript 最成功的项目，获得了 Star 冠军。 shadcn-ui 是用 React 编写的 UI 组件的集合，允许通过 TailwindCSS 进行自定义样式； 它最大的特点就是不用 npm 下载，而可以通过点点点，直接生成代码， copy 一下直接就用 ： 图片来源：shadcn-ui-reusable-ui-component-collection Bun 没错，“包子”还在持续发力~ Bun 不仅是一个专注性能与开发者体验的全新 JavaScript htmx 风潮已经袭来，人们开始强调一种“傻瓜客户端”方法，即由服务器生成 html 本体并发送至客户端，意味着 UI 事件会被发送至服务器进行处理。
1K10编辑于 2024-02-24 - 来自专栏深度学习与python
2023年JavaScript生态系统发展趋势
总的来说，最受欢迎的项目是 shadcn/ui。这是一个可用于创建自定义组件的 UI 组件集。JavaScript 运行时 Bun 仍然保持着良好的发展势头，成为第二受欢迎的项目。 自从 shadcn/ui 在 GitHub 上第一次提交以来，到现在已经有一年了。该项目是一个可重用的组件集，可以复制和粘贴到应用程序中用于构建组件。这样就不用安装库了。 根据 shadcn/ui FAQ 页面，其理念是： ... 赋予开发人员对代码的所有权和控制权，允许他们决定如何构建组件以及采用什么样式。 Shadcn/ui 可以与支持 React 的框架一起使用，比如 Next js、Astro、Remix 和 Gatsby。 Bun 在最受欢迎的项目中排名第二。
45011编辑于 2024-02-17
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号